<template>
  <ul class="nav">
    <router-link tag="li" :to="{ name: 'Home' }">网站首页</router-link>
    <router-link tag="li" :to="{ name: 'About' }">关于我们</router-link>
    <router-link tag="li" :to="{ name: 'Product' }">产品展示</router-link>
    <router-link tag="li" :to="{ name: 'News' }">新闻中心</router-link>
    <router-link tag="li" :to="{ name: 'Suggest' }">在线留言</router-link>
    <router-link tag="li" :to="{ name: 'Connect' }">联系我们</router-link>
    <router-link tag="li" :to="{ name: 'Login' }">登录</router-link>
  </ul>
</template>

<script>
export default {
    name:'Nav'
};
</script>

<style lang="less" scoped>
.nav{
  list-style: none;
  padding: 0;
  display: flex;
  width: 100%;
  min-width: 800px;
  background: orange;
  margin: 0;
  height: 40px;
  li{
    margin: 0 10px;
    line-height: 40px;
    padding: 0 10px;
    &:hover, &.router-link-exact-active{
      background: #fff;
      color:orange;

    }
  }
}
</style>